<script setup>
import AppPage from "@/pages/Admin/Layouts/AppPage.vue";
import {useForm} from "@inertiajs/vue3";
import {Message} from "@arco-design/web-vue";
import ImageUpload from '@/components/Admin/Upload/Image.vue'

const props = defineProps({
    data: {
        type: Object,
        default: () => ({})
    },
    title: {
        type: String,
        default: '网站设置'
    }
})


const form = useForm({
    name: '',
    short_name: '',
    title: '',
    description: '',
    keywords: '',
    logo: '',
    admin_logo: '',
    admin_name: '',
    contact_name: '',
    contact_phone: '',
    contact_email: '',
    contact_address: '',
    wechat_qrcode: '',
    qq_qrcode: '',
    wechat_work_qrcode: '',
    icp: '',
    copyright: '',
})

const rules = ref({
    name: [{required: true, message: '请输入网站名称', trigger: 'blur'}],
    short_name: [{required: true, message: '请输入网站简称', trigger: 'blur'}],
    title: [{required: true, message: '请输入网站标题', trigger: 'blur'}],
    logo: [{required: true, message: '请上传网站LOGO', trigger: 'blur'}],
    admin_logo: [{required: true, message: '请上传管理员LOGO', trigger: 'blur'}],
    admin_name: [{required: true, message: '请输入管理员名称', trigger: 'blur'}],
    icp: [{required: true, message: '请输入ICP备案号', trigger: 'blur'}],
    copyright: [{required: true, message: '请输入版权信息', trigger: 'blur'}],
})

const FormRef = ref()
const loading = ref(false)
const handleSubmit = async () => {
    try {
        loading.value = true
        const valid = await FormRef.value.validate()
        if (valid) {
            return
        }
        form.post(route('admin.setting.website.update'), {
            onSuccess: () => {
                Message.success('保存成功')
            },
            onError: (errors) => {
                console.log(errors)
                const fields = {};
                // 遍历所有错误
                for (const [fieldName, messages] of Object.entries(errors)) {
                    // 构造字段对象
                    fields[fieldName] = {
                        status: 'error',
                        message: messages
                    };
                    FormRef.value.scrollToField(fieldName)
                }
                FormRef.value.setFields(fields);
            }
        })
    } catch (error) {
        console.log(error)
    } finally {
        loading.value = false
    }
}

const handleReset = () => {
    FormRef.value.resetFields()
}

onMounted(() => {
    Object.assign(form, props.data)
})
</script>

<template>
    <app-page :title="title">
        <a-card
            :style="{ borderRadius: '12px'}"
            :title="title"
            class="custom-card h-auto shadow-sm transition-all duration-300 hover:shadow-md"
        >
            <a-form
                ref="FormRef"
                :model="form"
                :rules="rules"
                :scroll-to-first-error="true"
                auto-label-width
                layout="horizontal"
                @submit="handleSubmit"
            >
                <!-- 基本信息 -->
                <div class="section-title">基本信息</div>
                <div class="form-grid">
                    <a-form-item class="form-item full-width" field="admin_name" label="后台管理名称">
                        <a-input
                            v-model.trim="form.admin_name"
                            :max-length="18"
                            allow-clear
                            placeholder="请输入后台管理名称"
                            show-word-limit
                        />
                    </a-form-item>

                    <a-form-item class="form-item" field="name" label="网站名称">
                        <a-input
                            v-model.trim="form.name"
                            :max-length="30"
                            allow-clear
                            placeholder="请输入网站名称"
                            show-word-limit
                        />
                    </a-form-item>

                    <a-form-item class="form-item" field="short_name" label="网站简称">
                        <a-input
                            v-model.trim="form.short_name"
                            :max-length="18"
                            allow-clear
                            placeholder="请输入网站简称"
                            show-word-limit
                        />
                    </a-form-item>


                    <a-form-item class="form-item " field="admin_logo" label="后台管理LOGO">
                        <div class="upload-container">
                            <image-upload v-model="form.admin_logo" size="small"/>
                            <div class="upload-tip">建议尺寸：60×60px，支持PNG、JPG格式</div>
                        </div>
                    </a-form-item>

                    <a-form-item class="form-item " field="logo" label="网站LOGO">
                        <div class="upload-container">
                            <image-upload v-model="form.logo" size="small"/>
                            <div class="upload-tip">建议尺寸：60×60px，支持PNG、JPG格式</div>
                        </div>
                    </a-form-item>

                    <a-form-item class="form-item" field="icp" label="ICP备案号">
                        <a-input
                            v-model.trim="form.icp"
                            allow-clear
                            placeholder="请输入ICP备案号"
                        />
                    </a-form-item>

                    <a-form-item class="form-item" field="copyright" label="版权信息">
                        <a-input
                            v-model.trim="form.copyright"
                            :max-length="100"
                            allow-clear
                            placeholder="请输入版权信息"
                            show-word-limit
                        />
                    </a-form-item>

                </div>

                <!-- SEO设置 -->
                <div class="section-title">SEO设置</div>
                <div class="form-grid">
                    <a-form-item class="form-item" field="title" label="网站标题">
                        <a-input
                            v-model="form.title"
                            allow-clear
                            placeholder="请输入网站标题"
                        />
                    </a-form-item>

                    <a-form-item class="form-item" field="keywords" label="网站关键词">
                        <a-input
                            v-model="form.keywords"
                            allow-clear
                            placeholder="请输入网站关键词"
                        />
                    </a-form-item>

                    <a-form-item class="form-item full-width" field="description" label="网站描述">
                        <a-textarea
                            v-model="form.description"
                            :auto-size="{ minRows: 3, maxRows: 5 }"
                            :max-length="200"
                            placeholder="请输入网站描述"
                            show-word-limit
                        />
                    </a-form-item>
                </div>

                <!-- 联系信息 -->
                <div class="section-title">联系信息</div>
                <div class="form-grid">
                    <a-form-item class="form-item" field="contact_name" label="联系姓名">
                        <a-input
                            v-model="form.contact_name"
                            allow-clear
                            placeholder="请输入联系姓名"
                        />
                    </a-form-item>
                    <a-form-item class="form-item" field="contact_email" label="联系邮箱">
                        <a-input
                            v-model="form.contact_email"
                            allow-clear
                            placeholder="请输入联系邮箱"
                        />
                    </a-form-item>

                    <a-form-item class="form-item" field="contact_phone" label="联系电话">
                        <a-input
                            v-model="form.contact_phone"
                            allow-clear
                            placeholder="请输入联系电话"
                        />
                    </a-form-item>

                    <a-form-item class="form-item" field="contact_address" label="联系地址">
                        <a-input
                            v-model="form.contact_address"
                            allow-clear
                            placeholder="请输入联系地址"
                        />
                    </a-form-item>

                    <a-form-item class="form-item" field="wechat_qrcode" label="微信二维码">
                        <div class="upload-container">
                            <image-upload v-model="form.wechat_qrcode" size="small"/>
                            <div class="upload-tip">建议尺寸：200×200px，支持PNG、JPG格式</div>
                        </div>
                    </a-form-item>

                    <a-form-item class="form-item" field="wechat_work_qrcode" label="企业微信二维码">
                        <div class="upload-container">
                            <image-upload v-model="form.wechat_work_qrcode" size="small"/>
                            <div class="upload-tip">建议尺寸：200×200px，支持PNG、JPG格式</div>
                        </div>
                    </a-form-item>

                    <a-form-item class="form-item" field="qq_qrcode" label="QQ二维码">
                        <div class="upload-container">
                            <image-upload v-model="form.qq_qrcode" size="small"/>
                            <div class="upload-tip">建议尺寸：200×200px，支持PNG、JPG格式</div>
                        </div>
                    </a-form-item>
                </div>

                <!-- 提交按钮 -->
                <div class="form-actions">
                    <a-button :loading="loading" class="submit-btn" html-type="submit" size="large" type="primary">
                        保存设置
                    </a-button>
                    <a-button class="ml-3" size="large" type="outline" @click="handleReset">重置</a-button>
                </div>
            </a-form>
        </a-card>
    </app-page>
</template>

<style scoped>
.section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-1);
    margin: 24px 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border-1);
    position: relative;
    padding-left: 8px;
}

.section-title::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 60px;
    height: 2px;
    border-radius: 1px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 24px;
    margin-bottom: 8px;
}

.form-item {
    margin-bottom: 0;
}

.form-item.full-width {
    grid-column: 1 / -1;
}

.upload-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.upload-tip {
    font-size: 12px;
    color: var(--color-text-3);
    line-height: 1.4;
}

.form-actions {
    display: flex;
    justify-content: center;
    margin-top: 32px;
    padding-top: 24px;
    gap: 12px;
    border-top: 1px solid var(--color-border-1);
}

.submit-btn {
    padding-left: 32px;
    padding-right: 32px;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .form-actions {
        flex-direction: column;
        gap: 12px;
    }

    .submit-btn, .form-actions .ml-3 {
        width: 100%;
        margin-left: 0 !important;
    }
}
</style>
